<script setup lang="ts">
import type { CustomDialogInstance } from '@/types'
import { PAGING } from '@/constant'

import { carbonInventoryApi } from '@/api'

defineOptions({
  name: 'PanchaTpl',
})

const props = defineProps<{
  initialProtocol?: string
  initialPoint: number
}>()

const emit = defineEmits<{
  (e: 'open'): void
  (e: 'close'): void
  (e: 'selected', data: {
    id: number
    protocolCode: string
    pointId: number
    name: string
    [key: string]: any
  }): void
}>()

const userStore = useUserStore()

const dialogRef = ref<CustomDialogInstance>()
const tanpanchaStore = useTanpanchaStore()
const name = ref()
const protocolCode = ref(props.initialProtocol)
const pointName = ref('')
const list = shallowRef<any>([])
const loading = ref(false)
const pagination = reactive({
  pageNumber: 1,
  pageSize: 5,
  total: 0,
})

watchEffect(() => {
  if (props.initialPoint) {
    pointName.value = userStore.getPointNameById(props.initialPoint)
  }
})

async function getTableData() {
  loading.value = true
  try {
    const { data } = await carbonInventoryApi.queryTplByPage({
      pageNumber: pagination.pageNumber,
      pageSize: pagination.pageSize,
      pointId: props.initialPoint,
      protocolCode: unref(protocolCode),
      name: unref(name),
    })
    list.value = data.records ?? []
    pagination.total = data.total ?? 0
  }
  finally {
    loading.value = false
  }
}

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getTableData()
}

async function handleUseTemplate(item: any) {
  close()
  emit('selected', item)
}

async function open() {
  protocolCode.value = props.initialProtocol
  clickSearch()
  dialogRef.value?.open()
  emit('open')
}
async function close() {
  dialogRef.value?.close()
  emit('close')
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    width="800px"
    title="选择模板"
    :need-saving="false"
    :show-confirm-button="false"
    :show-cancel-button="false"
    cancel-button-text="关闭"
  >
    <ElForm inline>
      <ElFormItem label="核算标准" class="!mb-0">
        <ElSelect v-model="protocolCode" clearable placeholder="请选择" class="!w-44">
          <ElOption
            v-for="item in tanpanchaStore.standards"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="模板名称" class="!mb-0">
        <ElInput v-model="name" clearable placeholder="输入模板名称" />
      </ElFormItem>
      <ElFormItem class="!mb-0">
        <ElButton type="primary" @click="clickSearch">
          查询
        </ElButton>
      </ElFormItem>
    </ElForm>
    <p class="flex items-center">
      <span>核算主体：</span><span class="opacity-80">{{ pointName }}</span>
    </p>
    <ElTable :data="list" size="small" :loading="loading" height="280px">
      <ElTableColumn prop="name" label="模板名称" />
      <ElTableColumn prop="protocolCode" label="核算标准" />
      <ElTableColumn prop="pointName" label="核算主体" />
      <ElTableColumn prop="creationName" label="创建人" />
      <ElTableColumn prop="updateTime" label="更新时间" />
      <ElTableColumn prop="e" label="操作" width="100px">
        <template #default="{ row }">
          <ElLink type="warning" :underline="false" @click="handleUseTemplate(row)">
            使用
          </ElLink>
        </template>
      </ElTableColumn>
    </ElTable>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[5, ...PAGING.PAGE_SIZES]"
      class="justify-end"
      :total="pagination.total"
      @current-change="getTableData"
      @size-change="getTableData"
    />
  </CustomDialog>
</template>
